import React from 'react'
import { Button, Form, Input, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import './Login.css'
import Particles from 'react-particles-js';
import axios from 'axios'
export default function Login() {
  const navigate = useNavigate()
  const [form] = Form.useForm();
  const onFinish = (values) => {
    console.log('Finish:', values);
    axios.get(`http://localhost:8000/users?username=${values.username}&password=${values.password}&roleState=true&_expand=role`).then(res=>{
      console.log(res.data);
      if(res.data.length===0){
        message.error('用户名或密码不匹配')
      }else{
        localStorage.setItem('token',JSON.stringify(res.data[0]))
        navigate('/')
      }
    })
  };
  return (
    
    <div style={{ background: 'rgb(35,39,65)', height: '100%',overflow:'hidden' }}>

          {/* 这个粒子效果高度会多出来一点记得隐藏 */}
          <Particles   height={document.documentElement.clientHeight}/ > 
      <div className='formContainer'>
      <div className='loginTitle'>全球新闻发布管理系统</div>
      
        <Form form={form} name="horizontal_login" layout="horizontal" onFinish={onFinish}>
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item shouldUpdate>
            {() => (
              <Button
                type="primary"
                htmlType="submit"
                // disabled={
                //   !form.isFieldsTouched(true) ||
                //   !!form.getFieldsError().filter(({ errors }) => errors.length).length
                // }
              >
                Log in
              </Button>
            )}
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
